<template>
  <div class="madp-show-sort">
    <basic-container>
      <div style="width: 60%">
        <el-row class="headers">
          <el-col :span="20" :push="1">拖动下表模块，可进行排序</el-col>
          <el-col :span="2">
            <el-button type="primary" v-show="showBtn" @click="confirm">确定</el-button>
          </el-col>
        </el-row>
        <el-table
          border
          row-key="id"
          :data="tableData"
          :header-cell-style="{
            background: 'rgb(255, 191, 191)',
            color: 'rgb(44,44,44)'
          }"
          stripe
        >
          <el-table-column label="模块名称" prop="name" align="center"></el-table-column>
          <el-table-column label="排序展示" type="index" align="center" width="120"></el-table-column>
          <el-table-column label="状态" prop="status" align="center">
            <template slot-scope="scope">{{ scope.row.status == 1 ? '开启' : '关闭' }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == 1 && permissions.cp_show_sort_close" type="text" @click="onEdit(scope.row)">关闭</el-button>
              <el-button v-if="scope.row.status != 1 && permissions.cp_show_sort_open" type="text" @click="onEdit(scope.row)">开启</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </basic-container>
  </div>
</template>
<script>
import storeApi from '@/api/store/store.js'
import Sortable from 'sortablejs'
import { mapGetters } from 'vuex'
export default {
  components: {},
  data() {
    return {
      showBtn: false,
      blackTableLoading: false,
      tableData: []
    }
  },
  computed: {
    ...mapGetters({
      permissions: 'permissions'
    })
  },
  watch: {},
  props: {},
  created() {},
  mounted() {
    // 阻止默认行为
    document.body.ondrop = function (event) {
      event.preventDefault()
      event.stopPropagation()
    }
    this.rowDrop()
    this.getShowMenuList()
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex !== oldIndex) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow)
            _this.showBtn = true
          }
        }
      })
    },
    onEdit(info) {
      this.$confirm(`是否确定${info.status == 1 ? '关闭' : '上架'}该模块?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          storeApi
            .editShowMenu({
              id: info.id,
              status: info.status == 1 ? 0 : 1
            })
            .then((res) => {
              this.$message({
                type: 'success',
                message: info.status == 1 ? '关闭成功!' : '开启成功'
              })
              info.status = info.status == 1 ? 0 : 1
            })
        })
        .catch(() => {})
    },
    confirm() {
      this.$confirm(`是否确定修改当前模块排序?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableData.map((ele, idx) => {
            ele.sort = idx + 1
          })
          storeApi.batchEditShowMenu(this.tableData).then((res) => {
            this.showBtn = false
            this.$message.success('修改成功')
          })
        })
        .catch(() => {})
    },
    // 获取产品列表
    getShowMenuList() {
      this.blackTableLoading = true
      storeApi
        .getShowMenuList({
          type: this.menuId
        })
        .then((res) => {
          console.log(res)
          let list = res.data.data
          this.tableData = list.sort((a, b) => a.sort - b.sort)
          this.blackTableLoading = false
          this.$emit('update:isUpdate', false)
        })
        .catch(() => {
          this.blackTableLoading = false
          this.$emit('update:isUpdate', false)
        })
    }
  }
}
</script>
<style scoped lang="scss">
.headers {
  display: flex;
  align-items: center;
  height: 45px;
}
.el-table:hover {
  cursor: pointer;
}
</style>
